<template>
  <div>{{ title + ":" + price }}</div>
  <button @click="editData">修改</button>
</template>
<script>
import { toRefs, readonly, reactive, watchEffect } from "vue";
export default {
  setup() {
    const book =  reactive({
      author: "Vue Team",
      year: "2020",
      title: "Vue 3 Guide",
      description: "You are reading this book right now ;)",
      price: "free",
      editData() {
          book.title = "哈哈哈"
      }
    })
    // 这样才是响应式的
    // const { title, price ,  editData} = toRefs(book);
    watchEffect((onInvalidate) => {
    //   const token = performAsyncOperation(id.value);
    console.log(book)
      onInvalidate(() => {
        //果在setup()或生命周期钩子函数中使用了 watchEffect, 则在卸载组件时
         console.log("onInvalidate")
      });
    });


    return {
    //   title,
    //   price,
    //   editData
        ...toRefs(book)
    };
  },
  methods:{
    //   editData() {
    //       this.title = "哈哈哈"
    //   }
  }
};
</script>
<style>
</style>